<template>
  <div class="big-customer">
    <div class="cx">
      <div class="search_box">
        <el-form label-width="130px" :inline="true">
          <el-form-item label="姓名:">
            <el-input
              placeholder="联系人姓名"
              v-model="search.searchName"
              style="width: 190px"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号:">
            <el-input
              placeholder="联系人手机号查询"
              v-model="search.searchPhone"
              style="width: 190px"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="大客户行业:">
            <el-cascader
              expand-trigger="hover"
              clearable
              :options="search.searchIndOption"
              v-model="searchIndustry"
            >
            </el-cascader>
          </el-form-item>
          <el-form-item label="单位查询">
            <el-input
              placeholder="客户单位查询"
              style="width: 190px"
              v-model="search.searchCompany"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="请选择地区:">
            <el-cascader
              style="width: 200px"
              expand-trigger="hover"
              :options="areaOptions"
              v-model="searchArea"
              clearable
            >
            </el-cascader>
            <div class="btns">
              <el-button type="primary" icon="el-icon-search" @click="cx">查询</el-button>
              <el-button type="primary" icon="el-icon-refresh">重置</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- // 客户列表 -->
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column type="index" label="ID"> </el-table-column>
      <el-table-column prop="Sales_name" label="联系人"> </el-table-column>
      <el-table-column prop="phone" label="手机号"> </el-table-column>
      <el-table-column :formatter="dateFormat" label="开通时间">
      </el-table-column>
      <el-table-column prop="contactsName" label="代理人"> </el-table-column>
      <el-table-column prop="sales_calls" label="联系电话"> </el-table-column>
      <el-table-column prop="province" label="省"> </el-table-column>
      <el-table-column prop="city" label="市"> </el-table-column>
      <el-table-column prop="area" label="区"></el-table-column>
      <el-table-column prop="Account_status" label="账号状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.Account_status"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
          {{ scope.row.Account_status }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="scope;"> 详情 </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import vue from "vue";
import moment from "moment";
import axios from "axios";
import { Button, Table, TableColumn, Switch } from "element-ui";
vue.use(Button);
vue.use(Table);
vue.use(TableColumn);
vue.use(Switch);
export default {
  data() {
    return {
      search: {
        searchName: "",
        searchPhone: "",
        searchIndOption: "",
        searchCompany: "",
      },

      tableData: [],
      searchIndOption: [
        {
          value: "选项1",
          label: "建筑业",
        },
        {
          value: "选项2",
          label: "畜牧业",
        },
        {
          value: "选项3",
          label: "金融业",
        },
      ],
      value: "",
    };
  },
  created() {
    this.getAllKeyAccounts();
  },
  methods: {
    dateFormat(row) {
      let date = row.timer;
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    getAllKeyAccounts() {
      axios.get("http://47.108.201.43:3000/api/getAllKeyAccounts",{
        params:{}
      }).then((res)=>{
        this.tableData = res.data.data;
      });
    },
    cx() {
      axios.post("http://47.108.201.43:3000/api/queryAllKeyAccounts", {
        contactsName: this.search.searchName,
      }).then((res)=>{
        this.tableData = res.data.data;
      })
    }
  },
};
</script>
<style scoped>
.el-table {
  line-height: 100%;
}
.el-input {
  width: 210px;
}
</style>